<template>
  <div class="c-editor-color-board__container">
    <template v-if="props.type === 'border' || props.type === 'line'">
      <div class="c-editor-color-board__border-style-container">
        <a-flex justify="space-evenly" align="center">
          <LineOutlined
            class="c-editor-color-board__button-icon"
            :class="{ 'border-style-item-click': props.borderStyle === 'line' }"
            @click="selectBorderStyle('line')"
          />
          <DashOutlined
            class="c-editor-color-board__button-icon"
            :class="{ 'border-style-item-click': props.borderStyle === 'dash' }"
            @click="selectBorderStyle('dash')"
          />
          <SmallDashOutlined
            class="c-editor-color-board__button-icon"
            :class="{
              'border-style-item-click': props.borderStyle === 'smallDash',
            }"
            @click="selectBorderStyle('smallDash')"
          />
        </a-flex>
      </div>
    </template>
    <template v-if="props.type === 'border'">
      <div class="c-editor-color-board__thickness-container">
        <div class="title">粗细</div>
        <a-row justify="center" align="middle" :gutter="15">
          <a-col :span="19">
            <a-slider
              v-model:value="thickness"
              :min="props.minThickness"
              :max="props.maxThickness"
              @after-change="selectThickness"
            />
          </a-col>
          <a-col :span="4">
            <span>
              {{ thickness }}
            </span>
          </a-col>
        </a-row>
      </div>
    </template>
    <div
      class="c-editor-color-board__transparent-container"
      v-if="!(props.type === 'color' || props.type === 'line')"
    >
      <div class="title">透明度</div>
      <a-row
        class="transparent__slider"
        justify="center"
        align="middle"
        :gutter="10"
      >
        <a-col :span="19">
          <a-slider
            v-model:value="transparent"
            :min="props.minTransparent"
            :disabled="props.fillTransparentSlider"
            :max="100"
            :step="10"
            @after-change="selectTransparent"
          />
        </a-col>
        <a-col :span="4">
          <span>{{ transparent }}%</span>
        </a-col>
      </a-row>
    </div>
    <div class="c-editor-color-board__color-board-container">
      <a-select
        v-model:value="colorType"
        :bordered="false"
        @change="changeColorType"
        style="margin-bottom: 8px"
      >
        <a-select-option :value="1">官方经典</a-select-option>
        <a-select-option :value="2">海岛珊瑚</a-select-option>
        <a-select-option :value="3">雪月寒山</a-select-option>
      </a-select>
      <a-row wrap>
        <a-col :span="3" v-if="props.type === 'fill'">
          <div
            class="c-editor-color-board__no-color-option-container"
            :class="{ color__click: selectedColorId === '0' }"
            @click="selectColor('0', 'transparent')"
          >
            <div class="c-editor-color-board__no-color-option"></div>
          </div>
        </a-col>
        <a-col v-for="item in colorOption" :key="item.id" :span="3">
          <div
            class="c-editor-color-board__color-option-container"
            :class="{ color__click: selectedColorId === item.id }"
            @click="selectColor(item.id, item.textColor)"
          >
            <div
              class="c-editor-color-board__color-option"
              :style="{
                '--color': item.textColor,
                '--border': item.textColorBorder,
              }"
            ></div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { classicColorOption, coralColor, snowColor } from '@/utils/Const.ts';
import { reactive, ref } from 'vue';
import {
  DashOutlined,
  SmallDashOutlined,
  LineOutlined,
} from '@ant-design/icons-vue';

const emit = defineEmits({
  selectColor: ({ colorId, color }) => {
    return !!(colorId && color);
  },
  selectThickness: ({ thickness }) => {
    return !!thickness;
  },
  selectTransparent: ({ transparent }) => {
    return !!transparent;
  },
  selectBorderStyle: ({ style }) => {
    return !!style;
  },
});
const props = defineProps({
  type: String,
  borderStyle: String,
  selectedColorId: String,
  selectedTransparent: Number,
  selectedBorderThickness: Number,
  minThickness: Number,
  maxThickness: Number,
  minTransparent: {
    type: Number,
    default: 10,
  },
  fillTransparentSlider: {
    type: Boolean,
    default: false,
  },
});

// 粗细
const thickness = ref(props.selectedBorderThickness);
// 选择粗细
function selectThickness(currentThickness: number) {
  thickness.value = currentThickness;
  emit('selectThickness', { thickness: currentThickness });
}

// 透明度
const transparent = ref(props.selectedTransparent);
// 选择透明度
function selectTransparent(transparent: number) {
  emit('selectTransparent', { transparent });
}

// 颜色系列
const colorType = ref(1);
// 颜色选项
const colorOption = reactive([...classicColorOption]);
function changeColorType(value: number) {
  colorType.value = value;
  switch (colorType.value) {
    case 1:
      colorOption.length = 0;
      colorOption.push(...classicColorOption);
      break;
    case 2:
      colorOption.length = 0;
      colorOption.push(...coralColor);
      break;
    case 3:
      colorOption.length = 0;
      colorOption.push(...snowColor);
      break;
  }
}
// 选择颜色
function selectColor(colorId: string, color: string) {
  emit('selectColor', { colorId, color });
}

// 选择边框样式
function selectBorderStyle(style: string) {
  emit('selectBorderStyle', { style });
}
</script>

<style scoped lang="scss">
.c-editor-color-board__container {
  min-width: 15rem;
  padding: 5px;
  .c-editor-color-board__button-icon {
    cursor: pointer;
    font-size: 25px;
    color: rgb(76, 75, 79);
    border-radius: 3px;
    padding: 5px;
    margin: 2px;
    &:hover {
      background: rgba(185, 185, 185, 0.2);
    }
  }
  .border-style-item-click {
    font-weight: bold;
    background: rgba(16, 142, 233, 0.1);
  }
  .c-editor-color-board__color-board-container {
    padding: 5px;
  }
  .c-editor-color-board__no-color-option-container {
    border: transparent solid 1px;
    border-radius: 3px;
    .c-editor-color-board__no-color-option {
      width: 1.2rem;
      height: 1.2rem;
      margin: 3px;
      background-clip: content-box;
      border-radius: 3px;
      border: black solid 1px;
      cursor: pointer;
      background: linear-gradient(
        to top right,
        transparent 0%,
        transparent calc(50% - 1px),
        #ee1313 50%,
        transparent calc(50% + 1px),
        transparent 100%
      );
    }
  }
  .c-editor-color-board__color-option-container {
    border: transparent solid 1px;
    border-radius: 3px;
    .c-editor-color-board__color-option {
      width: 1.2rem;
      height: 1.2rem;
      margin: 3px;
      background-clip: content-box;
      border-radius: 3px;
      border: var(--border) solid 1px;
      cursor: pointer;
      background-color: var(--color);
    }
  }
  .color__click {
    border: rgb(52, 86, 255) solid 1px;
  }
  .title {
    color: rgb(86, 93, 100);
    padding: 5px 11px;
  }
}
</style>
